<template>
    <div class="terminal">
      <div class="terminal-header">
        <span>C:\Users\019399104 </span>
      </div>
      <div class="terminal-body">
        <div v-for="(line, index) in commandOutput" :key="index" class="terminal-line">
          {{ line }}
        </div>
        <div class="terminal-body-input">
          <span v-if="isWrite">C:\Users\019399104 ></span><input v-model="command" @keyup.enter="executeCommand" type="text" autofocus>
        </div>
      </div>
      
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  const command = ref('');
  const command1 =['正在 Ping 10.231.48.126 具有 32 字节的数据:','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','请求超时。','请求超时。','请求超时。','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','请求超时。','请求超时。','请求超时。','10.231.48.126 的 Ping 统计信息:','      数据包: 已发送 = 12，已接收 = 6，丢失 = 6 (50% 丢失)，','往返行程的估计时间(以毫秒为单位):','最短 = 0ms，最长 = 0ms，平均 = 0ms']
  const command2 = ['e 3/26  interface','      TEI = 0, Ces = 1, SAPI = 0, State =TEI_ASSIGNED','正在 Ping 10.231.48.126 具有 32 字节的数据:','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','请求超时。','请求超时。','请求超时。','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','请求超时。','请求超时。','请求超时。','10.231.48.126 的 Ping 统计信息:','    数据包: 已发送 = 12，已接收 = 6，丢失 = 6 (50% 丢失)，','往返行程的估计时间(以毫秒为单位):','    最短 = 0ms，最长 = 0ms，平均 = 0ms']
  const command3 = ['正在 Ping 10.231.48.126 具有 32 字节的数据','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','10.231.48.126 的 Ping 统计信息:','数据包: 已发送 = 12，已接收 = 12，丢失 = 0 (0% 丢失)，','往返行程的估计时间(以毫秒为单位):','最短 = 0ms，最长 = 0ms，平均 = 0ms']
  const command4 = ['e 3/26  interface','        TEI = 0, Ces = 1, SAPI = 0, State =MULTIPLE_FRAME_ESTABLISHED','正在 Ping 10.231.48.126 具有 32 字节的数据:','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','来自 10.231.48.126 的回复: 字节=32 时间<1ms TTL=255','10.231.48.126 的 Ping 统计信息:','    数据包: 已发送 = 12，已接收 = 12，丢失 = 0 (0% 丢失)，','往返行程的估计时间(以毫秒为单位):','    最短 = 0ms，最长 = 0ms，平均 = 0ms']
  const commandOutput = ref<string[]>([]);
  const isWrite = ref(true)
  let time: ReturnType<typeof setInterval> | null = null;
  let index = 0;
  let loopIndex = 0;
  let loopIndex1 = 0;
  const executeCommand = () => {
    commandOutput.value.push(`C:\/Users\/019399104 >${command.value}`);
    index = 0;
    if (time) {
      clearInterval(time as unknown as number);
      time = null;
    }
    isWrite.value = false
    if (command.value.includes('10.231.48.126')) {
      loopIndex++;
      time = setInterval(() => {
        if (loopIndex < 2) {
          if (index < command1.length) {
            commandOutput.value.push(command1[index]);
          } else {
            clearInterval(time as unknown as number);
            time = null;
            isWrite.value = true
          }
        } else {
          console.log(89,index)
          if (index < command3.length) {
            commandOutput.value.push(command3[index]);
          } else {
            clearInterval(time as unknown as number);
            time = null;
            isWrite.value = true
          }
        }
        index++;
      }, 1000);
    }else if (command.value.includes('show int')) {
      loopIndex1++;
      time = setInterval(() => {
        if (loopIndex1 < 2) {
          if (index < command2.length) {
            commandOutput.value.push(command2[index]);
          } else {
            clearInterval(time as unknown as number);
            time = null;
            isWrite.value = true
          }
        } else {
          if (index< command4.length) {
            commandOutput.value.push(command4[index]);
          } else {
            clearInterval(time as unknown as number);
            time = null;
            isWrite.value = true
          }
        }
        index++;
      },1000)
    }else{
      commandOutput.value.push('...');
      isWrite.value = true
    }
    
  
    // 清空命令输入
    command.value = '';
  };
  </script>
  
  <style scoped>
  .terminal {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 1px solid #000;
    overflow: hidden;
    position: relative;
    background-color: #000;
    font-size: 16px;
    padding: 10px;
  }
  
  .terminal-header {
    background-color: #000;
    color: #fff;
    font-family: monospace;
  }
  
  .terminal-body {
    height: calc(100% - 50px);
    overflow-y: scroll;
    font-family: monospace;
    scrollbar-width: none;
    position: relative;
    color: #fff;
  }
  
  .terminal-line {
    white-space: pre-wrap;
    /* 保留空格和换行符 */
  }
  .terminal-body-input {
    position: relative;
    display: flex;
    position: absolute;
  }
  .terminal-body-input input {
    
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    font-family: monospace;
  }
  </style>